<template>
  <el-dialog
    class="theme1"
    width="780px"
    :visible.sync="dialogOpen"
    :close-on-click-modal="false"
    @close="closeHander"
  >
    <div id="AddDatabaseConnect">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="数据库连接管理" name="first">
          <el-container>
            <el-main>
              <el-form
                inline-message
                :rules="formRules"
                :model="formData"
                style="margin-left: 100px;"
                ref="form"
              >
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="连接名称"
                  prop="name"
                  style="margin-bottom: 5px;"
                >
                  <el-input size="mini" v-model="formData.name" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="驱动"
                  prop="driverClass"
                  style="margin-bottom: 5px;"
                >
                  <el-select
                    size="mini"
                    v-model="formData.driverClass"
                    style="width: 300px;"
                  >
                    <el-option
                      v-for="item in driverClasses"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="数据库名称"
                  prop="dbname"
                  style="margin-bottom: 5px;"
                >
                  <el-input size="mini" v-model="formData.dbname" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="主机"
                  prop="host"
                  style="margin-bottom: 5px;"
                >
                  <el-input size="mini" v-model="formData.host" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="端口"
                  prop="port"
                  style="margin-bottom: 5px;"
                >
                  <el-input size="mini" v-model="formData.port" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="用户名"
                  prop="username"
                  style="margin-bottom: 5px;"
                >
                  <el-input size="mini" v-model="formData.username" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="密码"
                  prop="passwd"
                  style="margin-bottom: 5px;"
                >
                  <el-input
                    size="mini"
                    type="password"
                    v-model="formData.passwd"
                    style="width: 300px;"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="编码"
                  prop="type"
                  style="margin-bottom: 5px;"
                >
                  <el-select
                    size="mini"
                    v-model="formData.type"
                    style="width: 300px;"
                  >
                    <el-option
                      v-for="item in types"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  :lable-position="right"
                  label-width="100px"
                  label="模式"
                  prop="owner"
                  style="margin-bottom: 5px;"
                >
                  <el-input size="mini" v-model="formData.owner" style="width: 300px;"></el-input>
                </el-form-item>
                <el-from-item>
                  <el-button
                    style="background-color: white; color: #f04959; margin-left: 160px;"
                    @click="testBtnClicked"
                    >连接测试</el-button
                  >
                  <el-button
                    style="background-color: #f04959; color: white"
                    @click="okBtnClicked"
                    >保存</el-button
                  >
                </el-from-item>
              </el-form>
            </el-main>
          </el-container>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import { DATABASE_CON_SAVE } from '@api/url'
import ajax from '@api/ajax'
export default {
  name: 'add-database-connect',
  data () {
    return {
      dialogOpen: false,
      activeName: 'first',
      formData: {
        optMode: 'A'
      },
      formRules: {
        name: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        driverClass: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        dbname: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        host: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        port: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        username: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        passwd: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ],
        owner: [
          {
            required: true,
            message: '此项为必输项',
            trigger: 'blur'
          }
        ]
      },
      driverClasses: [
        'com.microsoft.sqlserver.jdbc.SQLServerDriver',
        'com.mysql.jdbc.Driver',
        'oracle.jdbc.driver.OracleDriver',
        'sunje.goldilocks.jdbc.GoldilocksDriver'
      ],
      types: ['自动', 'UTF-8', 'GBK2312', 'BIG5']
    }
  },
  methods: {
    // 编辑初始化页面内容
    addView () {
      this.dialogOpen = true
    },
    okBtnClicked () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formData.optMode = 'A'
          ajax
            .post(DATABASE_CON_SAVE, this.formData)
            .then(res => {
              this.dialogOpen = false
              this.clearStageData()
              this.$emit('saved')
              this.$message.success('保存成功！')
            })
            .catch(err => {
              console.error('保存失败！', err)
            })
        } else {
          return false
        }
      })
    },
    testBtnClicked () {
      this.$refs.form.validate(valid => {
        this.formData.optMode = 'T'
        if (valid) {
          ajax
            .post(DATABASE_CON_SAVE, this.formData)
            .then(res => {
              this.$message.success('连接测试成功！')
            })
            .catch(err => {
              console.error('连接失败！', err)
            })
        } else {
          return false
        }
      })
    },
    clearStageData () {
      this.formData = {}
      this.$refs.form.clearValidate()
    },
    closeHander () {
      this.clearStageData()
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.theme1 {
  .el-dialog {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);
  }

  label {
    display: inline-block;
    width: 100px;
    text-align: left;
  }
}
</style>
